<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, 
    user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="Cache-Control" content="no-cache" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <title>上传文件</title>
  <link rel="stylesheet" href="../../static/css/h5/normalize.min.css?t={{randomArg}}">
  <link rel="stylesheet" href="../../static/css/h5/m_upload.min.css?t={{randomArg}}">
  <script src="../../static/js/h5/m_upload.min.js?t={{randomArg}}"></script>
</head>

<body>
  <section class="upload-tablet">
    <!-- enctype="multipart/form-data" 设置表单的文件以二进制方式上传 就可以上传多种不同的文件 -->
    <form action="/upload_file" name="upload_form" method="post" enctype="multipart/form-data">
      <h3>请选择上传的文件</h3>
      <a href="javascript:;" class="file">选择文件
        <input type="file" name="file1" id="file" />
      </a>
      <div id="info">
        <span id="fileName"></span>
        <div id="fileSize"></div>
        <div id="fileType"></div>
      </div>
      <br>
      <div class="progress-bar">
        上传进度条：
        <div class="container">
          <span id="progress-value"></span>
          <span id="mask"></span>
          <span id="progress"></span>
        </div>
      </div>
    </form>
    <div class="btn-box">
      <button id="displayInfo" onclick="fileSelected()">显示信息</button>
      <button id="submit" onclick="uploadFile()">上&nbsp;&nbsp;传</button>
    </div>
    <div id="result" style="display: none;"></div>
    <a class="back" href="javascript:;" onclick="history.back()">点击返回</a>
  </section>
</body>

</html>